<template>
  <basic-container shadow="never">

    <el-row :span="24" style="height: 100%">
      <el-col :span="6">
        <basic-container>
          <el-divider content-position="center">菜单</el-divider>
          <div style="height: 70%;overflow: scroll">
            <avue-tree
                ref="avueTree"
                :default-expanded-keys="expandedKeys"
                :permission="getBtnPermission"
                :loading="loading"
                :option="menuTreeOption"
                :data="dataSource"
                @check-change="checkChange"
                @node-click="handlerDataRule">
              <template v-slot:default="scope">
               <span class="el-tree-node__label">
                 {{ (scope.node || {}).label }}
                <span>
                </span>
              </span>
              </template>

              <template v-slot:menu="scope">
                <div v-if="getBtnPermission('sys:menu:add')" class="avue-tree__item" @click="addMenu(scope.node)">新增
                </div>
                <div v-if="getBtnPermission('sys:menu:edit')" class="avue-tree__item" @click="editMenu(scope.node)">编辑
                </div>
                <div v-if="getBtnPermission('sys:menu:del')">
                  <div v-if="selectTemp.length>0" class="avue-tree__item" @click="batchDelMenu">批量删除</div>
                  <div v-else class="avue-tree__item" @click="delMenu(scope.node.data)">删除</div>
                </div>

              </template>
            </avue-tree>

          </div>
        </basic-container>
      </el-col>
      <el-col :span="18">

        <div v-if="getBtnPermission('sys:dataRule:list')">
          <basic-container>
            <el-divider content-position="left">数据规则</el-divider>
            <data-rule ref="dataRule"></data-rule>
          </basic-container>
        </div>
      </el-col>
    </el-row>
    <editor ref="editorMenu" @confirm="submitSuccess"></editor>
  </basic-container>
</template>

<script>
import {createStaticMixin} from "@/mixins/startCrud.js"
import dataRule from "@/views/sys/menu/dataRule.vue";
import editor from "@/views/sys/menu/editor.vue";
import * as menuApi from "@/api/sys/menuApi"

import IconTemp from "components/avue/core/components/icon/index.vue";
import menuOption from "@/option/sys/menuOption";

export default {
  mixins: [createStaticMixin({
    option: menuOption,
    api: menuApi,
    isTreeData: true,
  })],
  components: {
    IconTemp,
    dataRule,
    editor
  },
  computed: {
    menuTreeOption() {
      return {
        title: '我是标题',
        filterText: "搜索关键字自定义",
        defaultExpandAll: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        multiple: this.getBtnPermission("sys:menu:deletes"),
        formOption: {
          labelWidth: 100,
          multiple: true,
          column: [
            {
              label: '自定义项',
              prop: 'menuLabel'
            }],
        },
        props: {
          label: 'menuLabel',
          value: 'id',
          children: 'children'
        }
      }

    }
  },
  data() {
    return {
      selectTemp: [],
      expandedKeys: [],
    }
  },
  created() {
    //
  },
  methods: {
    submitSuccess(val) {
      if (val.parentId) {
        this.expandedKeys = [val.parentId]
      }
      this.refreshChange();
    },
    afterRenderDataSource() {
      setTimeout(() => {
        console.log("this.expandedKeys", this.expandedKeys)
        this.$refs.avueTree.expandKeys(this.expandedKeys, true)
      }, 100)


    },
    loadCrudOptionAfter() {
      this.loadRemoteDataSources()
    },
    editMenu(node) {
      if (!node) {
        node = {};
      }

      this.$refs.editorMenu.edit(node.data);
    },
    addMenu(node) {
      let id = "0";
      if (node && node.data) {
        id = node.data.id
      }
      this.$refs.editorMenu.add(id);
    },
    handlerDataRule(row) {
      this.$refs.avueTree.client.show = false
      if (this.$refs.dataRule) {
        this.$refs.dataRule.show(row[this.rowKey])
      }
    },
    checkChange() {
      this.selectTemp = this.$refs.avueTree.getCheckedKeys();
    },
    batchDelMenu() {
      this.$confirm(`此操作将永久删除您选择的数据！ 是否继续?`, '系统提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        return menuApi.deleteByIds(this.selectTemp)
      }).then(res => {
        this.loadRemoteDataSources()
        this.$message.success('删除成功')
      }).finally(() => {
        this.selectTemp = []
      })
    },
    delMenu(row) {

      this.$confirm(`此操作将永久删除为【${row.label}】的数据！ 是否继续?`, '系统提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        if (this.beforeRowDel) this.beforeRowDel(row, index);
        return menuApi.deleteById(row[this.rowKey], row)
      }).then(res => {
        this.loadRemoteDataSources()
        this.$message.success('删除成功')
        if (this.rowDelAfter) this.rowDelAfter(row, index);
      })
    }
  }
}
</script>

<style scoped>

</style>
